<template>
  <div class="content common-card">
    <dc-header :title="'门店数据'" :icon="'icon-header-back'"></dc-header>
    <div class="head-top">
      <dc-date @getTabBarDatep="getDate"></dc-date>
    </div>
      <div>
        <dc-row class="pt40 pb40 bg-white mt20" type="flex" justify="space-around">
          <dc-col class="card-data" span="6">
            <span class="num">{{storeData.flat}}</span>
            <span class="label">平效</span>
          </dc-col>
          <dc-col class="card-data" span="6">
            <span class="num">{{storeData.turnOverRate}}%</span>
            <span class="label">翻台率</span>
          </dc-col>
          <dc-col class="card-data" span="6">
            <span class="num">{{storeData.openRate}}%</span>
            <span class="label">开台率</span>
          </dc-col>
        </dc-row>
        <dc-row class="pt40 pb40 bg-white mt20" type="flex" justify="space-around">
          <dc-col class="card-data" span="9">
            <span class="num">{{storeData.upperRate}}%</span>
            <span class="label">上座率</span>
          </dc-col>
          <dc-col class="card-data" span="9">
            <span class="num">{{storeData.averageAmount}}</span>
            <span class="label">桌均消费</span>
          </dc-col>
        </dc-row>
      </div>

      <component :timeFlag="currentDate.type" :beginTime="currentDate.startTime" :endTime="currentDate.endTime" :is="charts"></component>

  </div>
</template>
<script>
  import header from '@/components/header';
  import {col, row} from '@/components/Flex';
  import api from '@/common/api/storeCondition';
  //import date from '@/components/datetabbarp';
  import date from '@/components/datetabbar/all';
  import storeDay from './storeDay';
  import storeMonth from './storeMonth';
  export default {
    data () {
      return {
        storeData: {
          openRate: 0,
          turnOverRate: 0,
          upperRate: 0,
          flat: 0,
          averageAmount: 0
        },
        charts: '',
        currentDate: {}
      };
    },
    components: {
      'dc-col': col,
      'dc-row': row,
      'dc-header': header,
      'dc-date': date,
      'dc-day': storeDay,
      'other': storeMonth
    },
    methods: {
      getDate (date) {
        if (date) {
          this.currentDate = date;
          if (parseInt(date.type) === 1) {
            let crtdate = new Date();
            let curDate = crtdate.getFullYear() + '-' + (crtdate.getMonth() + 1) + '-' + (crtdate.getDate() + ' 0:0:0');
            this.charts = new Date(curDate).getTime() === date.startTime ? 'dc-day' : '';
          } else {
            this.charts = 'other';
          }
          this.getBase();
        }
      },
      getBase () {
        let data = {
          timeFlag: this.currentDate.type,
          beginTime: this.currentDate.startTime,
          endTime: this.currentDate.endTime
        };
        this._getSysStore(data);
      },
      _getSysStore (data) {
        api.getStoreMsg(data)
          .then(res => {
            if (res) {
              this.storeData = res;
            }
          });
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";

  .num {
    font-size: px2rem(32px);
    color: #333;
  }
</style>
